<template>
  <div>
    <button @click="locale = 'zh'">中文</button>
    <button @click="locale = 'en'">English</button>
    <h1>
      <!-- 你好世界 -->
      {{ t('helloWorld') }}
      <br>
      {{ t('greeting') }}
      <br>
      {{ t('cart') }}
    </h1>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 1 当前地区语言设置
      locale: 'zh',
      // 2 字典, 对象里面的每个属性都是一门语言的字典
      messages: {
        // 每个语言的字典里面都是key:value 的方式指定 标记:对应的翻译语句
        zh: {
          helloWorld: '你好世界',
          greeting: '你好',
          cart: '购物车'
        },
        en: {
          helloWorld: 'Hello World',
          greeting: 'Hello',
          cart: 'Shopping Cart'
        }
      }
    }
  },
  methods: {
    // 3 翻译函数, 输入一个语言标识 自动根据当前的设置, 返回翻译语句
    t(str) {
      // 找字典
      const dist = this.messages[this.locale]
      // 差语句
      return dist[str]
    }
  }
}
</script>

<style>

</style>
